<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="lib/vue-router.js"></script>
<body>
	
	<div id="app">
		<h1>{{ title }}</h1>
		
		<router-link to="/article/200/爱情">错过的终究放下</router-link> <br>
		<router-link to="/article/300/生活">拉入黑名单随笔</router-link> <br>
		<router-link to="/article/400/事业">爱情在彼此之间</router-link> <br>

		<router-view></router-view>

	</div>

	<template id="article">
		<div>
			<h3>当前的文章id： {{ $route.params.id }} 当前文章的分类： {{ $route.params.catname }}</h3>
		</div>
	</template>	

	<script type="text/javascript">
		
	
		const article = {template:"#article"}

		const routes = [
			{
				path:'/article',
				component:article
			}
		];

	
		const router = new VueRouter({
			
			routes:[
				{
					path:'/article/:id/:catname', 
					component:article
				}
			]
		})

		const vm = new Vue({
			router,
			data:{
				title:"vue-router 中别名 携带参数"
			},
			created(){
				
				console.log(this.$route);

				
			}
		}).$mount('#app');


	</script>
</body>
</html>